<template>
  <div id="enterpriseDisposeNum"></div>
</template>
<script setup>
import * as echarts from "echarts";
import resize from "../../../../mixin/resize.js";
import { getCurrentInstance } from "vue";
let myChart = shallowRef();
let props = defineProps(["disposeData"]);

let x = ref([]);
let y = ref([]);
watch(
  () => props.disposeData,
  () => {
  
    x.value = props.disposeData.x || [];
    y.value = props.disposeData.y || [];
   
    getServerData();
  },
  { deep: true }
);
onMounted(() => {
  myChart.value = echarts.init(document.getElementById("enterpriseDisposeNum"));
  resize(myChart.value);
  getServerData();
});

let getServerData = () => {
  myChart.value.setOption({
    tooltip: {
      trigger: "axis", //触发类型 柱状图
      axisPointer: { type: "none" }, //触发效果 移动上去 背景效果
      formatter: function (prams) {
        var newStr = prams[0].name + ":<br/>";
        for (let index in prams) {
          console.log(prams, " prams[index].seriesName");
          // let unit = prams[index].seriesName == "申报企业总数" ? "家" : "%";
          newStr +=
          
            '经营企业处置量' +
            "：" +
            prams[index].value +
            "<br/>";
        }
        return newStr;
      },
    },
    toolbox: {
      right: "4%",
      itemSize: 18,
      feature: {
        dataView: {
          show: true, // 是否显示工具
          title: "数据视图",
        },
        magicType: {
          title: "图表类型切换",
          type: ["line", "bar"], //图表类型切换
        },
        icon: "circle",
        saveAsImage: {
          show: true,
          title: "保持图片",
        },
      },
      padding: [0, 20, 4, 5],
    },
    grid: {
      top: "16%",
      right: "1%",
      left: "1%",
      bottom: "8%",
      containLabel: true,
    },
    xAxis: [
      //x轴
      {
        type: "category", //坐标轴类型 离散
        data: x.value, //数据
        axisTick: false, //是否显示刻度
        axisLine: {
          //底部线
          show: true,
          lineStyle: {
            type: "solid",
            color: "#ccc",
            width: 2,
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          fontSize: 16,
          color: "#666",
          lineHeight: 18,
          formatter: function (value, index) {
            if (value !== undefined) {
              if (value.length > 5) {
                // 超出5个字符显示省略号
                return value.slice(0, 5) + "\n" + value.slice(5);
              }
              return value;
            }
          },
        },
      },
    ],
    yAxis: [
      //y轴
      {
        name: "(吨)", //名称
        type: "value", //连续类型
        nameTextStyle: {
          padding: [0, 60, 2, 20], // 修改单位位置
          color: "#666",
          fontSize: 18,
          fontWeight: 400,
        },
        axisLine: {
          show: true, // 左坐标轴线
          lineStyle: {
            type: "solid",
            color: "#ccc",
            width: 2,
          },
        },
        splitLine: {
          //分割线
          show: false,
          lineStyle: {
            type: "solid",
            color: "#F1F1F1",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          // 左侧字颜色
          color: "#666",
          fontSize: 18,
          fontWeight: 400,
        },
      },
      {
        name: "(%)", //名称
        type: "value", //连续类型
        nameTextStyle: {
          padding: [0, 0, 5, 40], // 修改单位位置
          color: "#666",
          fontSize: 18,
          fontWeight: 400,
        },
        // axisLine: {
        //   //坐标轴样式
        //   show: true, //显示 →坐标轴线
        //   lineStyle: {
        //     type: "solid",
        //     color: "#ccc",
        //     width: 2,
        //   },
        // },
        splitLine: {
          show: false,
        },
        axisLabel: {
          color: "#666",
          fontSize: 18,
          fontWeight: 400,
        },
      },
    ],
    series: [
      //系统列表%
      {
        name: "经营企业总数", //名称
        type: "bar", //类型
        barWidth: 20, //宽度
        data: y.value, //数值
        z: 1,
        color: "#0874FA",
        label: {
          normal: {
            show: true,
            position: "top",
            // fontWeight: "bold",
            color: "#0874FA",
          },
        },
      },
    ],
  });
};
</script>
<style lang="scss" scoped>
#enterpriseDisposeNum {
  width: 100%;
  margin-top: 2vh;
  height: calc(36vh - 32px);
}
</style>
